
@import "../css/syntax.css";
@import "../css/markers.css";
/*@import "../css/light.css";*/

*, *::before, *::after { box-sizing: border-box; }

:root { --gap: clamp(1em, 5vmin, 3rem); }

body {
  font-family: sf pro display;
  margin: var(--gap);
  gap: var(--gap);
  .syntax { break-inside: avoid; }
  @media (min-width: 1000px) {
    column-count: 2;
  }
}


/* wrapper */
.syntax {
  border-radius: 6px;
  margin-bottom: var(--gap);
  header { padding: .7em 1.5em; }

  h2 {
    letter-spacing: 0.02em;
    font-weight: 400;
    font-size: 90%;
    text-align: center;
    margin: .0;
  }
}

/* dark == default */
body {
  background: #111729;
  color: #fff;

  .syntax {
    background-color: #20293A;
    border-color:  #fff1;
    box-shadow: none;
    header { border-bottom: 1px solid #fff1; }
  }
}

.is-light {
  background: #f3f8fa;
  color: #444;

  .syntax {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 0 .5em #eee;
    header { border-bottom: 1px solid #eee; }
  }
}



